<template>
	<div class="login-register">
		<div class="contain">
			<div class="big-box" :class="{ active: isLogin }">
				<div class="big-contain" key="bigContainLogin" v-if="isLogin">
					<div class="btitle">账户登录</div>
					<div class="bform">
						<input type="text" placeholder="用户名" v-model="form.username">
						<span class="errTips" v-if="existed">* 用户名已经存在！ *</span>
						<input type="password" placeholder="密码" v-model="form.password">
						<span class="errTips" v-if="passwordError">* 密码填写错误 *</span>
					</div>
					<button class="bbutton" @click="login">登录</button>
				</div>
				<div class="big-contain" key="bigContainRegister" v-else>
					<div class="btitle">创建账户</div>
					<div class="bform">
						<input type="text" placeholder="用户名" v-model="form.username">
						<span class="errTips" v-if="existed">* 用户名已经存在！ *</span>
						<input type="password" placeholder="密码" v-model="form.password">
					</div>
					<button class="bbutton" @click="register">注册</button>
				</div>
			</div>
			<div class="small-box" :class="{ active: isLogin }">
				<div class="small-contain" key="smallContainRegister" v-if="isLogin">
					<div class="stitle">你好，同学!</div>
					<p class="scontent">开始注册，我们一起学习Java</p>
					<button class="sbutton" @click="changeType">注册</button>
				</div>
				<div class="small-contain" key="smallContainLogin" v-else>
					<div class="stitle">你好，同学!</div>
					<p class="scontent">让我们一起见证你的努力，请登录</p>
					<button class="sbutton" @click="changeType">登录</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'register', // 父组件的名称,
	data() {
		return {
			isLogin: true,
			passwordError: false,
			existed: false,
			form: {
				id: '',
				username: '',
				password: ''
			}
		}
	},
	methods: {
		changeType() {
			this.isLogin = !this.isLogin
			this.form.id = ''
			this.form.username = ''
			this.form.password = ''
		},
		login() {
			const self = this;
			if (self.form.username != "" && self.form.password != "") {
				self.$axios({
					method: 'post',
					url: '/login',
					data: {
						username: self.form.username,
						password: self.form.password
					}
				}).then(res => {
						console.log(res)
						if (res.status === 200 && res.data.code === 0) {
							// 登录成功后，弹出消息框提示用户，然后跳转到首页
							this.$message({
								message: '登录成功',
								type: 'success',
								duration: 2000
							})
							this.$router.push('/studentView')
						} else {
							// 如果后端返回的状态码和信息提示用户登录失败
							this.$message({
								message: res.data.msg,
								type: 'error',
								duration: 2000
							})
						} 
					})
					.catch(err => {
						this.message
						console.log(err);
					})

			} else {
				alert("填写不能为空！");
			}
		},
		register() {
			const self = this;
			if (self.form.username != "" && self.form.password != "") {
				self.$axios({
					method: 'post',
					url: '/registerUser',
					data: {
						id: self.form.id,
						username: self.form.username,
						password: self.form.password
					}
				})
					.then(res => {
						console.log(res)
						if (res.status === 200 && res.data.code === 0) {
							// 注册成功后，弹出消息框提示用户，然后跳转到登录页面
							this.$message({
								message: '注册成功',
								type: 'success',
								duration: 2000
							})
							this.isLogin=true;
						} else {
							// 如果后端返回的状态码和信息提示用户注册失败
							this.$message({
								message: res.data.msg,
								type: 'error',
								duration: 2000
							})
						}
					})
					.catch(err => {
						console.log(err);
					})
			} else {
				alert("填写不能为空！");
			}
		}
	},
	mounted() {
      this.$notify({
        title: '看这里：',
        message: '关注济南黑马程序员就业部，领取项目资料与源码',
        duration: 15000
      });
    }
}
</script>
<style src="@/style/register.css"></style> 
